<template>
  <div class="app-container">
    <div class="filter-container">
      <label
        for="search"
        class="filter-item"
        style="font-size: 12px;"
      >检索：
      </label>
      <el-input
        id="search"
        v-model="query.name"
        clearable
        size="mini"
        placeholder="按姓名查询"
        style="width: 160px;"
        class="filter-item"
        @keyup.enter.native="getList"
      />
      <el-select
        v-model="query.classID"
        class="filter-item"
        value=""
        size="mini"
      >
        <el-option
          v-for="item in classes"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
        <el-option label="所有班级" value="-1" />
      </el-select>
      <el-button
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-search"
        @click="getList">查询
      </el-button>
    </div>
    <stu-table
      :list="list"
      :loading="loading"
      :total="total"
      :query="query"
      style="width: 800px;"
      :classes="classes"
      @edit="editDialog"
      @reload="getList"
    />
    <el-dialog :visible.sync="dialog" :title="title" />
  </div>
</template>

<script>
import { fetchStudentList } from '../../api/student'
import { fetchClassList } from '../../api/class'
import StuTable from './module/stuTable'
export default {
  name: 'StudentManager',
  components: { StuTable },
  data() {
    return {
      loading: true,
      dialog: false,
      title: '',
      total: 0,
      list: [],
      classes: ['-1'],
      query: {
        page: 1,
        limit: 20,
        name: null,
        sort: '+id',
        classID: '-1'
      },
      form: {}
    }
  },
  created() {
    this.getClsList()
    this.getList()
  },
  methods: {
    resetForm() {
      this.form = this.$options.data().form
    },
    getList() {
      this.loading = true
      fetchStudentList(this.query).then(response => {
        if (response.data.total !== 0) {
          this.$SUCCESS('获取学生列表成功')
          this.list = response.data.items
          this.total = response.data.total
        } else {
          this.list = []
          this.total = 0
        }
        this.loading = false
      }).catch(() => {
        this.$ERROR('获取学生列表失败')
        this.loading = false
      })
    },
    getClsList() {
      fetchClassList({ page: 1, limit: 20 }).then(response => {
        if (response.data.total !== 0) {
          this.classes = response.data.items
        }
      }).catch(() => {
        this.$ERROR('获取班级列表失败')
      })
    },
    editDialog(item) {
      this.resetForm()
      this.$setDialog(true, item.name + '的作品', true)
      this.form = JSON.parse(JSON.stringify(item))
    },
    // showPwd(id) {
    //   this.showPassword = id
    // },
    // dialogTable(row) {
    //   this.worksForm.title = row.name
    //   this.worksForm.dialogVisible = true
    // }
  }
}
</script>

<style scoped>
    .edit-input {
        padding-right: 100px;
    }
    .cancel-btn {
        position: absolute;
        right: 15px;
        top: 10px;
    }
    .pwdInput /deep/ input{
        border: none;
        user-select: none;
        text-align: center;
        background-color: transparent;
    }
</style>
